<template>
  <div class="intro">
    <company-home-content-layout>
      <template slot="menu">
        <menu-b :menu="menu" @item-click="handleItemClick" />
      </template>
      <template>
        <div class="intro-content">
          <div id="intro" class="company-intro">
            <div class="img-title">
              <div class="img-and-title">
                <img
                  class="img"
                  src="~/assets/images/menu-company-intro.png"
                  alt=""
                />
                <span class="title">企业介绍</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="intro-body">
              <div class="pic">
                <img :src="info.merchant.mer_avatar" class="objectCover" />
              </div>
              <div class="textarea">{{ info.merchant.mer_info }}</div>
            </div>
          </div>
          <div id="overview" class="company-overview">
            <div class="img-title">
              <div class="img-and-title">
                <img
                  src="~/assets/images/menu-company-overview.png"
                  alt=""
                  class="img"
                />
                <span class="title">企业概况</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="overview-body">
              <mail-table :table-data="introData" :table-style="{ width: '100%' }" />
            </div>
          </div>
          <div id="product" class="main-product">
            <div class="img-title">
              <div class="img-and-title">
                <img
                  src="~/assets/images/menu-main-product.png"
                  alt=""
                  class="img"
                />
                <span class="title">主要产品</span>
              </div>
              <div class="line"></div>
              <div class="btns productSwiBtn">
                <div class="prev">
                  <img src="~/assets/images/left.png" alt="" />
                </div>
                <div class="next">
                  <img src="~/assets/images/right.png" alt="" />
                </div>
              </div>
            </div>
            <swiper class="swiper product-body" :options="panelSwiper">
              <swiper-slide v-for="(item, index) in info.product" :key="index">
                <div
                  class="item cursor"
                  @click="showCarouselTc(index, 'product')"
                >
                  <div class="mask">
                    <div class="name">{{ item.store_name }}</div>
                  </div>
                  <div class="pic">
                    <img :src="item.image" class="objectCover" />
                  </div>
                  <div class="title textOverflow">{{ item.store_name }}</div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
          <div id="album" class="company-album">
            <div class="img-title">
              <div class="img-and-title">
                <img
                  src="~/assets/images/menu-company-album.png"
                  alt=""
                  class="img"
                />
                <span class="title">企业相册</span>
              </div>
              <div class="line"></div>
              <div class="btns companySwiBtn">
                <div class="prev">
                  <img src="~/assets/images/left.png" alt="" />
                </div>
                <div class="next">
                  <img src="~/assets/images/right.png" alt="" />
                </div>
              </div>
            </div>
            <swiper class="swiper album-body" :options="panelSwiper2">
              <swiper-slide v-for="(item, index) in info.photo" :key="index">
                <div class="item cursor" @click="showCarouselTc(index)">
                  <div class="mask">
                    <div class="name">{{ item.mer_name }}</div>
                  </div>
                  <div class="pic">
                    <img :src="item.image" class="objectCover" />
                  </div>
                  <div class="title">{{ item.mer_name }}</div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
          <div class="carousel" v-show="showCarousel">
            <m-carousel
              height="350px"
              :imgs="carouselPic"
              :title="carouselName"
              @close="showCarousel = false"
            />
          </div>
          <div id="certifi" class="company-certifi">
            <div class="img-title">
              <div class="img-and-title">
                <img
                  src="~/assets/images/menu-company-certifi.png"
                  alt=""
                  class="img"
                />
                <span class="title">营业许可</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="certifi-body">
              <div
                class="item"
                v-for="(item, index) in info.license"
                :key="index"
              >
                <div class="pic">
                  <img :src="item.image" class="objectCover" />
                </div>
                <div class="title">{{ item.mer_name }}</div>
              </div>
            </div>
          </div>
          <div id="exhibit" class="company-exhibit">
            <div class="img-title">
              <div class="img-and-title">
                <img
                  src="~/assets/images/menu-company-certifi.png"
                  alt=""
                  class="img"
                />
                <span class="title">参展信息</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="exhibit-body">
              <div
                class="item cursor"
                v-for="(item, index) in info.exhibitors"
                :key="index"
                @click="showCarouselTc(index, 'exhibitors')"
              >
                <div class="mask">
                  <div class="name">{{ item.mer_name }}</div>
                </div>
                <div class="pic">
                  <img :src="item.image || noPic" class="objectCover" />
                </div>
                <div class="title">
                  <div class="text">{{ item.mer_name }}</div>
                  <div class="foot">
                    <div class="name">
                      <img
                        src="~/assets/images/position.png"
                        alt=""
                        class="img"
                      />
                      {{ item.address || "--" }}
                    </div>
                    <div class="time">{{ item.create_time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </company-home-content-layout>
  </div>
</template>

<script>
import CompanyHomeContentLayout from "@/components/common/company-home-content-layout/company-home-content-layout"
import MenuB from "@/views/company-home/children/MenuB"
import MailTable from "@/components/common/mail-table/MailTable"
import MCarousel from "@/components/common/m-carousel/MCarousel"
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
import { getMerchantIntro } from "@/request/api"

export default {
  name: "Intro",
  components: {
    MCarousel,
    MailTable,
    MenuB,
    CompanyHomeContentLayout,
    swiper,
    swiperSlide
  },
  data() {
    return {
      id: "",
      info: {
        exhibitors: "",
        license: "",
        merchant: "",
        overview: "",
        photo: "",
        product: ""
      },
      panelSwiper: {
        slidesPerView: 4,
        slidesPerColumn: 1,
        slidesPerGroup: 4,
        spaceBetween: 10,
        navigation: {
          nextEl: ".productSwiBtn .next",
          prevEl: ".productSwiBtn .prev",
          disabledClass: "my-button-disabled",
          hiddenClass: "my-button-hidden",
        },
        observer: true,
      },
      panelSwiper2: {
        slidesPerView: 4,
        slidesPerColumn: 1,
        slidesPerGroup: 4,
        spaceBetween: 10,
        navigation: {
          nextEl: ".companySwiBtn .next",
          prevEl: ".companySwiBtn .prev",
          disabledClass: "my-button-disabled",
          hiddenClass: "my-button-hidden",
        },
        observer: true,
      },
      menu: [
        {
          index: "1",
          title: "企业介绍",
          defaultSrc: require("@/assets/images/menu-company-intro.png"),
          activeSrc: require("@/assets/images/menu-company-intro-active.png"),
          anchor: "intro",
        },
        {
          index: "2",
          title: "企业概况",
          defaultSrc: require("@/assets/images/menu-company-overview.png"),
          activeSrc: require("@/assets/images/menu-company-overview-active.png"),
          anchor: "overview",
        },
        {
          index: "3",
          title: "主要产品",
          defaultSrc: require("@/assets/images/menu-main-product.png"),
          activeSrc: require("@/assets/images/menu-main-product-active.png"),
          anchor: "product",
        },
        {
          index: "4",
          title: "企业相册",
          defaultSrc: require("@/assets/images/menu-company-album.png"),
          activeSrc: require("@/assets/images/menu-company-album-active.png"),
          anchor: "album",
        },
        {
          index: "5",
          title: "企业证书",
          defaultSrc: require("@/assets/images/menu-company-certifi.png"),
          activeSrc: require("@/assets/images/menu-company-certifi-active.png"),
          anchor: "certifi",
        },
        {
          index: "6",
          title: "参展信息",
          defaultSrc: require("@/assets/images/menu-company-exhibit.png"),
          activeSrc: require("@/assets/images/menu-company-exhibit-active.png"),
          anchor: "exhibit",
        },
      ],
      introData: [],
      carouselPic: [],
      carouselName: "",
      showCarousel: false,
      noPic: require("assets/images/nopic.jpg")
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getInfo()
  },
  methods: {
    getInfo() {
      getMerchantIntro(this.id).then((res) => {
          this.info = res.data
          let tem = this.info.overview || {}
          // console.log(tem,'tem');
          this.introData = [
            { key: "地区", value: tem.address },
            { key: "企业类型", value: tem.enterprise_type },
            { key: "成立时间", value: tem.founding_time },
            { key: "厂房面积", value: tem.plant_area },
            { key: "员工人数", value: tem.resign_headcount },
            { key: "年产能", value: tem.actual_production },
            { key: "年营业额", value: tem.turnover },
            { key: "外贸能力", value: tem.foreign_trade }]
        }).catch((err) => {
          this.$message.error(err.message)
        })
    },
    showCarouselTc(index, type) {
      if (type == "product") {
        this.carouselPic = this.$common.stringToArr(this.info.product[index].slider_image)
        this.carouselName = this.info.product[index].store_name
      } else if (type == "exhibitors") {
        this.carouselPic = this.$common.stringToArr(this.info.exhibitors[index].images)
        this.carouselName = this.info.exhibitors[index].mer_name
      } else {
        this.carouselPic = this.$common.stringToArr(this.info.photo[index].images)
        this.carouselName = this.info.photo[index].mer_name
      }
      this.showCarousel = true
    },
    handleItemClick(item) {
      this.$common.goAnchor("#" + item.anchor)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
/deep/ .carousel {
  z-index: 99 !important;
}
/deep/ .el-menu-item {
  border-bottom: 1px solid #eee;
}
.intro {
  .intro-content {
    background-color: #fff;
    padding: 25px 25px;
    .carousel {
      width: 99vw;
      height: 500px;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      left: 0;
      top: 50%;
      margin-top: -250px;
    }
    .img-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;

      .img-and-title {
        width: 130px;

        .title {
          font-size: 20px;
          color: #666;
          font-weight: bold;
        }

        .img {
          margin-right: 10px;
        }
      }

      .line {
        width: calc(100% - 130px);
        height: 1px;
        background-color: #eaeaea;
      }

      .btns {
        width: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20px;

        div {
          width: 31px;
          height: 31px;
          border-radius: 31px;
          background-color: $theme-color-1;
          color: #fff;
          font-size: 20px;
          line-height: 31px;
          text-align: center;
          cursor: pointer;
        }
        div:focus {
          outline: none;
        }
      }
    }

    .company-intro {
      margin-bottom: 50px;

      .intro-body {
        background-color: rgb(243, 244, 247);
        padding: 15px;
        display: flex;
        height: 260px;
        justify-content: space-between;
        align-items: center;

        .pic {
          width: 430px;
          height: 220px;
          background-color: pink;
        }

        .textarea {
          width: 460px;
          height: 220px;
          padding: 20px 0;
          overflow-y: auto;
          font-size: 16px;
          line-height: 25px;
          color: #666;
        }
      }
    }

    .company-overview {
      margin-bottom: 50px;

    }

    .main-product {
      margin-bottom: 50px;

      .product-body {
        display: flex;
        margin: 0 -10px;

        .item {
          position: relative;
          width: 100%;
          border: solid 1px #eaeaea;

          &:hover {
            .mask {
              visibility: visible;
            }
          }

          .mask {
            height: 161px;
            background-color: rgba(0, 0, 0, 0.4);
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            .name {
              color: #fff;
              width: 90%;
              height: 85%;
              border: dashed 1px #fff;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 10px;
            }
          }

          .pic {
            height: 161px;
            background-color: pink;
          }

          .title {
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 15px;
            color: #666;
            padding: 0 10px;
          }
        }
      }
    }

    .company-album {
      margin-bottom: 50px;

      .album-body {
        display: flex;
        margin: 0 -10px;

        .item {
          position: relative;
          width: 100%;
          border: solid 1px #eaeaea;

          &:hover {
            .mask {
              visibility: visible;
            }
          }

          .mask {
            height: 161px;
            background-color: rgba(0, 0, 0, 0.4);
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            .name {
              color: #fff;
              width: 90%;
              height: 85%;
              border: dashed 1px #fff;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0 10px;
            }
          }

          .pic {
            height: 161px;
            background-color: yellowgreen;
          }

          .title {
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 15px;
            color: #666;
            padding: 0 10px;
          }
        }
      }
    }

    .company-certifi {
      margin-bottom: 50px;

      .certifi-body {
        margin: -10px;

        .item {
          position: relative;
          width: calc((100% - 80px) / 4);
          margin: 10px;
          display: inline-block;

          .pic {
            height: 161px;
            background-color: palegoldenrod;
          }

          .title {
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            color: #666;
          }
        }
      }
    }

    .company-exhibit {
      .exhibit-body {
        .item {
          position: relative;
          width: calc((100% - 60px) / 3);
          margin: 10px;
          display: inline-block;
          background-color: rgb(243, 244, 247);
          border: solid 1px #eaeaea;

          &:hover {
            .mask {
              visibility: visible;
            }
          }

          .mask {
            height: 161px;
            background-color: rgba(0, 0, 0, 0.4);
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            .name {
              color: #fff;
              width: 90%;
              height: 85%;
              border: dashed 1px #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .pic {
            height: 161px;
            background-color: rgb(145, 179, 217);
          }

          .title {
            padding: 15px 10px;

            .text {
              margin-bottom: 15px;
              font-size: 16px;
              color: #666;
            }

            .foot {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              color: #969696;

              .name {
                display: flex;
                align-items: center;

                img {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
